<template>
  <div id="b-msgbox">
    <div class="b-transition" :class="{'show': isOpen}">
      <div class="b-content">
        <div class="b-header">收藏策略</div>
        <div class="b-old-strategy" v-for="item in strategys" @click="goToSortsFactors(item)">
          <p>{{item.strategy_name}}</p>
          <p>{{item.factor_names}}</p>
        </div>
        <div class="b-new-strategy" v-if="strategys.length<5" @click="newStrategy">
          +新建策略
        </div>
        <div class="b-new-strategy" style="color: #1296db" v-if="strategys.length>=5" @click="goDelStrategy">
          策略已满，去删除
        </div>
        <div class="b-footer">
          <div class="b-prompt">
            <span>温馨提示:</span>
            <br>
            <span>如编辑覆盖已保存的策略,则数据会被替换,且不可逆,请谨慎操作!</span>
          </div>
        </div>
      </div>
      <div class="b-cancel" @click="hide_msgbox()">
        取消
      </div>
    </div>
    <div class="b-modal" @click="hide_msgbox()" v-if="isOpen"></div>
  </div>
</template>

<script>
  import REQUEST from './../../services/test'
  import {Toast} from 'mint-ui'

  export default {
    name: 'b-msgbox',
    data () {
      return {
        isOpen: false,
        strategys: []
      }
    },
    props: {
      isSaveStr: Boolean
    },
    created () {
      this.$store.commit('getUrlParams')
      this.isHeader = this.$store.state.isHeader
    },
    computed: {},
    mounted () {
//      console.log(this.isSaveStr)
    },
    watch: {
      isSaveStr (newVal, oldVal) {
        if (newVal != oldVal) {
          this.isOpen = true
          this.getMyStrategys()
        }
      }
    },
    methods: {
      hide_msgbox () {
        this.isOpen = false
      },
      open2 () {
        this.$confirm('策略覆盖不可撤销，您确定要覆盖该策略吗?', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // type: 'warning',
          center: true
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // })
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
      },
      goToSortsFactors (s) {
        let userInfo = this.$store.state.userInfo
        let _self = this
        _self.isOpen = false
        this.$confirm('策略覆盖不可撤销，您确定要覆盖该策略吗?', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true
        }).then(() => {
          let selectFactors = _self.$store.state.selectFactors
          let _ids = []
          selectFactors.forEach(v => {
            _ids.push(v.factor_id)
          })
          s.factor_ids = _ids.join(',')
          REQUEST.relMyStrategys(userInfo, s).then(res => {
            if (res) {
              // _self.isOpen = false
              Toast({
                message: '策略更新成功!',
                position: 'bottom',
                duration: 3000
              })
            }
          })
        }).catch(() => {
          // _self.isOpen = false
        })

        // this.$store.commit('clearSelectFactor')
        // let allFactor = this.$store.state.allFactors
        // if (allFactor.length > 0) {
        //   let b = allFactor.filter(v => {
        //     return s.factor_ids.indexOf(v.factor_id) > -1
        //   })
        //   b.forEach(v => {
        //     v.isSelect = true
        //     this.$store.commit('pushSelectFactor', v)
        //   })
        // }
        // this.isOpen = false
        // this.$emit('toggleStrategy')
        // this.$router.replace({path: '/factorSortsMore', query: s})
      },
      getMyStrategys () {
        let userInfo = this.$store.state.userInfo
        let _self = this
        REQUEST.allMyStrategys(userInfo).then(res => {
          console.log('所有策略', res)
          _self.strategys = res
        }).catch(err => {
          console.info(err)
        })
      },
      newStrategy () {
        // let selectFactors = this.$store.state.selectFactors
        // if (selectFactors.length > 0) {
        this.$router.push('/newStrategyName')
        // } else {
        //   Toast({
        //     message: '未选择因子',
        //     position: 'bottom',
        //     duration: 3000
        //   })
        // }
      },
      goDelStrategy () {
        this.$router.push({name: 'strategyEdit'})
      }
    },
    components: {}
  }
</script>

<style lang="scss" scoped>
  #b-msgbox {
    overflow: hidden;
    .b-transition {
      position: fixed;
      bottom: 0;
      width: 94%;
      margin-left: 3%;
      font-size: 0.3733333rem;
      z-index: 2005;
      -webkit-transition: all .5s;
      transition: all .5s;
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
      padding-bottom: 0.5333333rem;
      .b-content {
        background-color: #fff;
        border-radius: 0.1066667rem;
        margin-bottom: 0.2666667rem;
        overflow: hidden;
        .b-header {
          height: 1.0666667rem;
          line-height: 1.0666667rem;
          background: #eee;
        }
        .b-new-strategy {
          height: 1.6rem;
          line-height: 1.6rem;
        }
        .b-old-strategy {
          /*height: 1.0666667rem;*/
          /*line-height: 1.0666667rem;*/
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          display: -webkit-flex;
          flex-direction: column;
          font-size: 0.3733333rem;
          border-bottom: 1px solid #e5e5e5;
          p {
            padding: 0.1066667rem 0;
            &:nth-of-type(2) {
              font-size: 0.32rem;
              color: #666666;
            }
          }
        }
        .b-footer {
          width: 100%;
          background: #eee;
          .b-prompt {
            text-align: left;
            width: 94%;
            font-size: 0.32rem;
            margin-left: 3%;
            color: #9C9C9C;
            padding-bottom: 0.2666667rem;
            /*margin-bottom: 0.2666667rem;*/
          }
        }
      }
      .b-cancel {
        line-height: 1.0666667rem;
        color: #fff;
        background-color: #5387DA;
        border-radius: 0.08rem;
      }
    }
    .b-transition.show {
      -webkit-transform: translateY(0%);
      transform: translateY(0%);
    }
    .b-modal {
      position: fixed;
      z-index: 2004;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      opacity: .5;
      background: #000;
      transition: all .5s;
    }
  }
</style>
